<template>
  <div id="left" class="multiple-item-bg">
    <!-- 建筑业总览 -->
    <div class="title_wrap grid-item">
      <!-- 标题 -->
      <div class="title">
        <span>建筑业总览</span>
        <year20andyear19 class="yearOrMonth" :year="isyear20" />
      </div>
      <div>
        <!-- 建筑业总产值 -->
        <div style="position: relative;left: 4rem;top: 3.4rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_jzyzcz_je_bind" />
          </div>
          <span class="border-title">建筑业总产值</span>
          <span class="border-number building color">{{jzy_jzyzcz_je}}</span>
          <span class="border-unit">万元</span>
          <span
            class="border-tb"
            :style="jzy_jzyzcz_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_jzyzcz_tb >= 0"
            >↑ {{jzy_jzyzcz_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_jzyzcz_tb}}%</span>
          </span>
        </div>
        <!-- 建筑业合同总额 -->
        <div style="position: relative;left: 26.6rem;top: -6rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_jzyhtje_je_bind" />
          </div>
          <span class="border-title">建筑业合同总额</span>
          <span class="border-number building color">{{jzy_jzyhtje_je}}</span>
          <span class="border-unit">万元</span>
          <span
            class="border-tb"
            :style="jzy_jzyhtje_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_jzyhtje_tb >= 0"
            >↑ {{jzy_jzyhtje_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_jzyhtje_tb}}%</span>
          </span>
        </div>
        <!-- 房屋建筑施工面积 -->
        <div
          style="position: relative;left: 49.076923rem;top: -15.5rem;height: 9.38rem;width: 19.46rem;"
        >
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_fwjzsgmj_je_bind" />
          </div>
          <span class="border-title">房屋建筑施工面积</span>
          <span class="border-number building color">{{jzy_fwjzsgmj_je}}</span>
          <span class="border-unit">km²</span>
          <span
            class="border-tb"
            :style="jzy_fwjzsgmj_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_fwjzsgmj_tb >= 0"
            >↑ {{jzy_fwjzsgmj_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_fwjzsgmj_tb}}%</span>
          </span>
        </div>
        <!-- 房屋建筑新开工面积 -->
        <div style="position: relative;left: 4rem;top: -14rem;height: 9.38rem;width: 19.46rem;">
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_fwjzxkgmj_je_bind" />
          </div>
          <span class="border-title">房屋建筑新开工面积</span>
          <span class="border-number building color">{{jzy_fwjzxkgmj_je}}</span>
          <span class="border-unit">km²</span>
          <span
            class="border-tb"
            :style="jzy_fwjzxkgmj_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_fwjzxkgmj_tb >= 0"
            >↑ {{jzy_fwjzxkgmj_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_fwjzxkgmj_tb}}%</span>
          </span>
        </div>
        <!-- 建筑业上交税金 -->
        <div
          style="position: relative;left: 26.6rem;top: -23.3rem;height: 9.38rem;width: 19.46rem;"
        >
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_jzysjsj_je_bind" />
          </div>
          <span class="border-title">建筑业上交税金</span>
          <span class="border-number building color">{{jzy_jzysjsj_je}}</span>
          <span class="border-unit">万元</span>
          <span
            class="border-tb"
            :style="jzy_jzysjsj_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_jzysjsj_tb >= 0"
            >↑ {{jzy_jzysjsj_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_jzysjsj_tb}}%</span>
          </span>
        </div>
        <!-- 建筑业利润总额 -->
        <div
          style="position: relative;left: 49.076923rem;top: -32.6rem;height: 9.38rem;width: 19.46rem;"
        >
          <img src="../../assets/left/bg_border.png" />
          <!-- 刻度 -->
          <div style="width: 5rem;height: 5rem;position: relative;top: -5.5rem;left: 2rem;">
            <rule :number="jzy_jzylrze_je_bind" />
          </div>
          <span class="border-title">建筑业利润总额</span>
          <span class="border-number building color">{{jzy_jzylrze_je}}</span>
          <span class="border-unit">万元</span>
          <span
            class="border-tb"
            :style="jzy_jzylrze_tb >= 0 ? 'color: #FF4965;' : 'color: #44C787;'"
          >
            同比
            <span
              style="padding-left: 1rem;float: right;"
              v-if="jzy_jzylrze_tb >= 0"
            >↑ {{jzy_jzylrze_tb}}%</span>
            <span style="padding-left: 1rem;float: right;" v-else>↓ {{-jzy_jzylrze_tb}}%</span>
          </span>
        </div>
      </div>
    </div>
    <!-- 工程消防设计审查 -->
    <div class="title_wrap grid-item">
      <!-- 标题 -->
      <div class="title">
        <span>工程消防设计审查</span>
        <!-- <year20andyear19 class="yearOrMonth" :year="isyear20" /> -->
      </div>
      <!-- <div class="title1">工程消防设计审查</div> -->
      <div class="circle">
        <CircleLeft :chartData="circleLeft" />
        <span class="total">
          <CountTo :endVal="total"></CountTo>
        </span>
        <span class="total-text">设计审查总数</span>
        <div class="square"></div>
        <span class="text">房建、市政类工程消防设计审查</span>
        <div class="num1">
          <CountTo :endVal="circleLeft.jzy_xfsjsc"></CountTo>
          <span class="jian">件</span>
        </div>
        <div class="square1"></div>
        <span class="text1">其他类消防设计审查</span>
        <div class="num2">
          <CountTo :endVal="circleLeft.jzy_qtlxfsjsc"></CountTo>
          <span class="jian">件</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="circle2">
        <CircleSecond :chartData="circleSecond" />
        <span class="total1">
          <CountTo :endVal="total1"></CountTo>
        </span>
        <span class="total-text1">验收备案总数</span>
        <div class="square"></div>
        <span class="text">房建、市政类工程消防验收备案</span>
        <div class="num1">
          <CountTo :endVal="circleSecond.jzy_xfsjsc"></CountTo>
          <span class="jian">件</span>
        </div>
        <div class="square1"></div>
        <span class="text1">其它29类建设工程</span>
        <div class="num2">
          <CountTo :endVal="circleSecond.jzy_qtlxfsjsc"></CountTo>
          <span class="jian">件</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import rule from "../../components/homePage/rule";
import CircleLeft from "../../components/echart/left/circle";
import CircleSecond from "../../components/echart/left/circle1";
import CountTo from "vue-count-to";
import year20andyear19 from "../../components/homePage/year20andyear19";

export default {
  components: {
    rule,
    CircleLeft,
    CircleSecond,
    CountTo,
    year20andyear19
  },

  data() {
    return {
      //是否显示2020年
      isyear20: true,
      // 工程消防设计审查图表数据
      circleLeft: {
        // 房建、市政类工程消防设计审查（件）
        jzy_xfsjsc: 0,
        // 其他类消防设计审查（件）
        jzy_qtlxfsjsc: 0
      },
      // 工程消防设计审查图表数据
      circleSecond: {
        // 房建、市政类工程消防验收备案（件）
        jzy_xfsjsc: 0,
        // 其他类建筑工程（件）
        jzy_qtlxfsjsc: 0
      },
      // 建筑业总产值
      jzy_jzyzcz_je: 0,
      jzy_jzyzcz_je_bind: 0,
      // 建筑业总产值同比
      jzy_jzyzcz_tb: 0,
      // 建筑业合同金额
      jzy_jzyhtje_je: 0,
      jzy_jzyhtje_je_bind: 0,
      // 建筑业合同金额同比
      jzy_jzyhtje_tb: 0,
      // 房屋建筑施工面积
      jzy_fwjzsgmj_je: 0,
      jzy_fwjzsgmj_je_bind: 0,
      // 房屋建筑施工面积同比
      jzy_fwjzsgmj_tb: 0,
      // 房屋建筑新开工面积
      jzy_fwjzxkgmj_je: 0,
      jzy_fwjzxkgmj_je_bind: 0,
      // 房屋建筑新开工面积同比
      jzy_fwjzxkgmj_tb: 0,
      // 建筑业上交税金
      jzy_jzysjsj_je: 0,
      jzy_jzysjsj_je_bind: 0,
      // 建筑业上交税金同比
      jzy_jzysjsj_tb: 0,
      // 建筑业利润总额
      jzy_jzylrze_je: 0,
      jzy_jzylrze_je_bind: 0,
      // 建筑业利润总额同比
      jzy_jzylrze_tb: 0,
      // 设计审查总数
      total: 0,
      // 验收备案总数
      total1: 0
    };
  },
  mounted() {
    this.initData();
    this.getGcxfsjsc();
  },

  methods: {
    // 获取工程消防设计审查数据
    getGcxfsjsc() {
      this.http({
        url: "",
        params: {
          path: "ov",
          groupid: 2
        },
        methods: "post"
      }).then(res => {
        this.circleLeft.jzy_xfsjsc = res.data.jzy_xfsjsc;
        this.circleLeft.jzy_qtlxfsjsc = res.data.jzy_qtlxfsjsc;
        this.circleSecond.jzy_xfsjsc = res.data.jzy_xfysba;
        this.circleSecond.jzy_qtlxfsjsc = res.data.jzy_qtljzgc;
        this.total = res.data.jzy_xfsjsc + res.data.jzy_qtlxfsjsc;
        this.total1 = res.data.jzy_xfysba + res.data.jzy_qtljzgc;
      });
    },
    initData() {
      let vm = this;
      let param1 = { path: "ov", groupid: 1 };
      vm.http({ url: "", method: "post", params: param1 }).then(res => {
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_jzyzcz_je),
          "jzy_jzyzcz_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_jzyhtje_je),
          "jzy_jzyhtje_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_fwjzsgmj_je),
          "jzy_fwjzsgmj_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_fwjzxkgmj_je),
          "jzy_fwjzxkgmj_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_jzysjsj_je),
          "jzy_jzysjsj_je"
        );
        vm.oldValueToNewValue(
          Math.round(res.data.jzy_jzylrze_je),
          "jzy_jzylrze_je"
        );

        vm.jzy_jzyzcz_je_bind = res.data.jzy_jzyzcz_je;
        vm.jzy_jzyhtje_je_bind = res.data.jzy_jzyhtje_je;
        vm.jzy_fwjzsgmj_je_bind = res.data.jzy_fwjzsgmj_je;
        vm.jzy_fwjzxkgmj_je_bind = res.data.jzy_fwjzxkgmj_je;
        vm.jzy_jzysjsj_je_bind = res.data.jzy_jzysjsj_je;
        vm.jzy_jzylrze_je_bind = res.data.jzy_jzylrze_je;
        vm.jzy_jzyzcz_tb = res.data.jzy_jzyzcz_tb;
        vm.jzy_jzyhtje_tb = res.data.jzy_jzyhtje_tb;
        vm.jzy_fwjzsgmj_tb = res.data.jzy_fwjzsgmj_tb;
        vm.jzy_fwjzxkgmj_tb = res.data.jzy_fwjzxkgmj_tb;
        vm.jzy_jzysjsj_tb = res.data.jzy_jzysjsj_tb;
        vm.jzy_jzylrze_tb = res.data.jzy_jzylrze_tb;
      });
    },

    // 显示大屏数字变化过程 value为变化后的数字 tag为字段名称
    oldValueToNewValue(value, tag) {
      let isAdd = true;
      let newValue = value;
      // 获取要变化的data数据
      let oldValue = this[tag];
      if (newValue > oldValue) {
        isAdd = true;
      } else if (newValue < oldValue) {
        isAdd = false;
      } else {
        return;
      }
      let _this = this;
      let i = 0;
      // 开启定时变化
      let timeId = setInterval(function() {
        let data = _this[tag];
        i++;
        if (isAdd) {
          data += Math.pow(2, i);
          if (data >= value) {
            _this[tag] = value;
            clearInterval(timeId);
          } else {
            _this[tag] = data;
          }
        } else {
          data -= Math.pow(2, i);
          if (data <= value) {
            _this[tag] = value;
            clearInterval(timeId);
          } else {
            _this[tag] = data;
          }
        }
      }, 100);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/building/left.scss";
</style>
